﻿
@{
    Layout = null;
}

<table id="point" class="easyui-datagrid" style="width:100%;height:100%"
       url="/Data/GetAllPoints"
       title="电站管理" iconcls="icon-save" fitcolumns="true" sortname="CreateTime" sortorder="desc"
       pagination="true"
       idfield="Id"
       fit="true"
       noheader="true"
       striped="true"
       singleselect="true"
       checkonselect="false"
       nowrap="true"
       loadmsg='正在加载……'
       rownumbers="true"
       frozencolumns="[[{ field:'ck'  checkbox:false }]]"
       toolbar="#tbCategory">
    <thead>
        <tr>
            <th field="Id" width="10" align="center">标识</th>
            <th field="Name" width="100" align="center">名称</th>
            <th field="PointType" width="100" align="center" formatter="getPointType">类型</th>
            <th field="Lng" width="100" align="center">经度</th>
            <th field="Lat" width="100" align="center">纬度</th>
            <th field="Remark" width="100" align="center">备注</th>
            <th field="CreateTime" width="100" align="center" formatter="formatTime">创建时间</th>
        </tr>
    </thead>
</table>
<div id="tbCategory">
    <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="javascript:AddPoint()">添加</a>
    <a href="#" class="easyui-linkbutton" iconcls="icon-cut" plain="true" onclick="javascript:UpdatePoint()">修改</a>
    <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" plain="true" onclick="javascript:DeletePoint()">删除</a>
</div>

<div id="AddPoint" class="easyui-dialog" title="添加端点" style="width:400px;height:400px;padding:10px" buttons="#point-dlg-buttons" data-options="iconCls:'icon-add',resizable:true,modal:true,closed:true">
    <div class="easyui-panel" data-options="fit:true,border:false">
        <form id="addPointForm" method="post" action="/Data/AddPoint">
            <input type="hidden" name="Id" id="point_Id" />
            <div style="margin-bottom:15px">
                <label>类型:</label><br /><br />
                <select name="PointType" id="PointType" class="easyui-combobox" style="width:50%" data-options="multiple:false,editable: false">
                    <option value="BDZ" selected="selected">变电站</option>
                    <option value="XG">线杆</option>
                </select>
            </div>

            <div style="margin-bottom:15px">
                <input class="easyui-textbox" name="Name" id="PointName" label="名称:" labelPosition="top" style="width:80%;">
            </div>

            <div style="margin-bottom:15px">
                <input class="easyui-textbox" name="Lng" id="PointLng" label="经度:" labelPosition="top" style="width:80%;">
            </div>

            <div style="margin-bottom:15px">
                <input class="easyui-textbox" name="Lat" id="PointLat" label="纬度:" labelPosition="top" style="width:80%;">
            </div>
            <div style="margin-bottom:15px">
                <input class="easyui-textbox" name="Remark" id="PointRemark" label="备注:" labelPosition="top" style="width:80%;">
            </div>
           
        </form>
    </div>
</div>
<div id="point-dlg-buttons">
    <table cellpadding="0" cellspacing="0" style="width:100%">
        <tr>
            <td>
                @*<img src="email.gif" />*@
            </td>
            <td style="text-align:right">
                <a href="#" class="easyui-linkbutton" iconcls="icon-save" onclick="javascript:SavePoint()">保存</a>
                <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript: $('#AddPoint').dialog('close')">取消</a>
            </td>
        </tr>
    </table>
</div>

<script type="text/javascript">

    function getPointType(value, row, index) {
        if(value){
            if(value=="BDZ"){
                return "变电站";
            }
            return "线杆";
        }
    }
    function AddPoint() {
        category_clear();
        $("#AddPoint").dialog({ title: "添加端点" });
        $("#AddPoint").dialog('open');
    }
    function SavePoint() {
        $("#addPointForm").form('submit', {
            success: function (data) {
                //data = eval("(" + data + ")");
                console.log(data)
                if (data) {
                    $("#AddPoint").dialog('close');
                    if ($("#point_Id").val() > 0)//ID存在
                    {
                        topCenter("修改端点", "修改成功!");
                    }
                    else {
                        topCenter("添加端点", "添加成功!");
                    }
                    $("#point").datagrid('reload');
                }
                else {
                    if ($("#point_Id").val() > 0)//ID存在
                    {
                        topCenter("修改端点", "修改失败!");
                    }
                    else {
                        topCenter("添加端点", "添加失败!");
                    }
                }

            }
        })
    }

    function UpdatePoint() {
        category_clear();
        var row = $("#point").datagrid("getSelected");
        if (row == null) {
            topCenter("提示", "请选择要修改的数据!");
            return;
        }
        $("#point_Id").val(row.Id);
        $("#PointName").textbox('setValue', row.Name);
        $("#PointType").combobox("setValue", row.PointType);
        $("#PointLng").textbox("setValue", row.Lng);
        $("#PointLat").textbox("setValue", row.Lat);
        $("#PointRemark").textbox("setValue", row.Remark);
        $("#AddPoint").dialog({ title: "修改端点" });
        $("#AddPoint").dialog('open');
    }

    function DeletePoint() {
        var row = $("#point").datagrid("getSelected");
        if (row == null) {
            topCenter("提示", "请选择要删除的数据!");
            return;
        }
        $.post('/Data/DeletePoint', { Id: row.Id }, function (data) {
            if (data) {
                topCenter("提示", "删除成功!");
                $("#point").datagrid('reload');
            } else {
                topCenter("提示", "删除失败!");
            }
        });
    }

    function category_clear() {
        $("#point_Id").val("");
        $("#PointName").textbox("setValue", "");
        $("#PointLng").textbox("setValue", "");
        $("#PointLat").textbox("setValue", "");
        $("#PointRemark").textbox("setValue", "");
    }
</script>
